<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>华硕ASUS商城</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/home/index.css">
    <script src="./js/vue.js"></script>
    <script src="./js/jquery.js"></script>
</head>

<body>
    <div id="app">
        <!-- 广告 -->
        <div class="header_img">
            <img src="./img/goods/header.png" alt="">
        </div>
        <!-- 导航1 -->
        <div class="header_nav">
            <div class="nav_box">
                <ul class="left_list">
                    <li><a href="#">华硕官网</a></li>
                    <li><a href="#">商城首页</a></li>
                    <li><a href="#">企业采购</a></li>
                    <li><a href="#">驱动下载</a></li>
                    <li><a href="#">装机必备</a></li>
                    <li><a href="#">已旧换新</a></li>
                </ul>
                <ul class="right_list">
                    <li v-if="!login"><a href="/login">登录</a></li>
                    <li v-if="!login"><a href="/reg">注册</a></li>
                    <li v-if="login"><a href="#">{{user.username}}</a></li>
                    <li v-if="login"><a href="#" @click.prevent="exit()">退出</a></li>
                    <li><a href="#">消息</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#" style="border-right: none;">手机版</a></li>
                    <li class="cart">
                        <div class="title"><a href="./cart">购物车({{cart_num}})</a></div>
                        <div class="cart_list">
                            <p v-show="!login">您还没有登录！登录后进入购物车</p>
                            <p v-show="login">开发中,点击查看购物车</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 导航2 -->
        <div class="header_nav2">
            <div class="content">
                <div class="logo">
                    <img src="./img/goods/logo.png" alt="">
                    <img src="./img/goods/logo2.png" alt="">
                </div>

                <ul class="inlink">
                    <li><img src="./img/goods/UI/mini1.png" alt=""><span>华硕电脑官网</span></li>
                    <li><img src="./img/goods/UI/mini2.png" alt=""><span>ROG专区</span></li>
                    <li><img src="./img/goods/UI/mini3.png" alt=""><span>多彩a豆</span></li>
                    <li><img src="./img/goods/UI/mini4.png" alt=""><span>华硕好屏</span></li>
                </ul>

                <div class="search">
                    <input type="text" name="search" id="" v-model="search" placeholder="新人礼">
                    <span></span>
                </div>
            </div>
        </div>

        <div class="navigation">
            <!-- 轮播图 -->
            <div class="banner">
                <ul class="lunbo">
                    <li v-for="(item,index) in lunbo" :key="index" v-show="index==lunbo_index">
                        <transition name="fade">
                            <img :src="item" alt="" v-show="index==lunbo_index">
                        </transition>
                    </li>
                </ul>

                <div class="pagination">
                    <span v-for="(item,index) in lunbo" :key="index" :class="index==lunbo_index?'cli':''"
                        @click="pagination(index)"></span>
                </div>

                <div class="left_btn" @click="cli_left"></div>
                <div class="right_btn" @click="cli_right"></div>


            </div>
            <!-- 多级菜单 -->
            <div class="menu_warp">
                <div class="menu">
                    <div class="citem" v-for="(item,index) in menu" ::key="index">
                        <a href="#" class="item_name"><span>{{item.title}}</span><img src="./img/goods/UI/arrow1.png"
                                alt=""></a>
                        <div class="children">
                            <div class="childitem" v-for="(childitem,index) in item.c">
                                <a href="#" class="leftbox">
                                    <img :src="childitem.img" alt="">
                                    <span>{{childitem.name}}</span>
                                </a>
                                <div class="rightbox">
                                    <a href="#" class="f1" v-for="val in childitem.list">{{val}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 广告2 -->
        <div class="gg" id="gg">
            <div class="topBox">
                <img src="./img/goods/UI/delete.png" alt="" class="del" @click="cli_hide($event)">
                <img src="./img/goods/header.png" alt="" class="mian">
            </div>
            <div class="leftBox">
                <img src="./img/goods/gg4.jpg" alt="">
            </div>
            <ul class="rightBox">
                <li class="icon1">
                    <div></div>
                    <p>个人中心</p>
                </li>
                <li class="icon2">
                    <div></div>
                    <p>热线</p>
                </li>
                <li class="icon3">
                    <div></div>
                    <p>优惠券</p>
                </li>
                <li class="icon4">
                    <div></div>
                    <p>客服</p>
                </li>
                <li class="icon5">
                    <div></div>
                    <p>APP</p>
                </li>
                <li class="icon6">
                    <div></div>
                    <p>注册好礼</p>
                </li>
                <li class="icon7" @click="toGo(0)">
                    <div></div>
                    <p>返回顶部</p>
                </li>
            </ul>
            <div class="lan">
                <a href="#scroll_1" @click.prevent="toGo(1220)">游戏专区</a>
                <a href="#scroll_2" @click.prevent="toGo(2048)">好屏轻薄本</a>
                <a href="#scroll_3" @click.prevent="toGo(2700)">ROG电竞专区</a>
            </div>
        </div>



        <!-- 模块1 -->
        <div class="module1">
            <div class="box1">
                <div class="group1">
                    <div class="title">轻薄笔记本好价热卖♥<img src="./img/goods/UI/topic.png" alt=""></div>
                    <div class="txt">购笔记本享一年意外险！600元大额券直降！指定机型加赠周边，点击抢购>></div>
                    <div class="tips">
                        <span><img src="./img/goods/UI/dui.png" alt=""> 慢就赔*</span>
                        <span><img src="./img/goods/UI/dui.png" alt=""> 贵就赔*</span>
                        <span><img src="./img/goods/UI/dui.png" alt=""> 全面保* </span>
                    </div>
                </div>
                <div class="group2">
                    <a href="#">
                        <img src="./img/goods/m1-box1-1.png" alt="">
                        <p>领券中心</p>
                    </a>
                    <a href="#">
                        <img src="./img/goods/m1-box1-2.png" alt="">
                        <p>A码通道</p>
                    </a>
                    <a href="#">
                        <img src="./img/goods/m1-box1-3.png" alt="">
                        <p>直播间</p>
                    </a>
                    <a href="#">
                        <img src="./img/goods/m1-box1-4.png" alt="">
                        <p>服务与支持</p>
                    </a>
                    <a href="#">
                        <img src="./img/goods/m1-box1-5.png" alt="">
                        <p>会员福利</p>
                    </a>
                </div>
                <div class="group3">
                    <!-- 未登录 -->
                    <div class="noLoginbox" v-if="!login">
                        <img src="./img/goods/avatar.png" alt="">
                        <div class="btn">
                            <a href="./login">登录</a>
                            <a href="./reg">注册</a>
                        </div>
                    </div>
                    <!-- 登录 -->
                    <div class="loginbox" v-if="login">
                        <img src="https://static.asus.com.cn/static/store/images/f_icon_no1.png" class="avatar"
                            alt="FX80">
                        <div class="info">
                            <p class="name">{{user.username}}</p>
                            <p class="ji">当前积分：0</p>
                        </div>
                        <a href="#" class="exit" @click.prevent="exit()">退出登录</a>
                    </div>
                </div>
            </div>

            <div class="box2" id="move_boxs">
                <div class="list_warp">
                    <ul class="list">
                        <li v-for="(item,index) in m1_box2" :key="index">
                            <img :src="item" alt="">
                        </li>
                    </ul>
                    <div class="btn-prev" @click="prev_move()"></div>
                    <div class="btn-next" @click="next_move()"></div>
                </div>

            </div>

            <div class="box3">
                <img src="./img/goods/m1-box3.jpg" alt="">
            </div>
        </div>

        <!-- 模块2 -->
        <div class="module2" id="goods">
            <div id="scroll_1" class="scroll">
                <div class="topic">1F 游戏专区</div>
                <div class="list">
                    <img src="./img/goods/f1.jpg" alt="">
                    <ul class="f">
                        <li v-for="item in wares_list.filter(item=>item.kind=='1f')" @click="goInfo(item.gid)">
                            <div class="imgbox">
                                <img :src="item.gurl" alt="">
                            </div>
                            <p class="goodsName">{{item.type}}&nbsp;{{item.model}}</p>
                            <p class="txt">{{item.tag}}</p>
                            <p class="price">{{item.gprice}}</p>
                        </li>
                    </ul>
                </div>
                <div class="blank">
                    <img src="./img/goods/gg3.jpg" alt="">
                </div>
            </div>

            <div id="scroll_2" class="scroll">
                <div class="topic">2F 好屏轻薄本</div>
                <div class="list">
                    <img src="./img/goods/f2.png" alt="">
                    <ul class="f">
                        <li v-for="item in wares_list.filter(item=>item.kind=='2f')" @click="goInfo(item.gid)">
                            <div class=" imgbox">
                                <img :src="item.gurl" alt="">
                            </div>
                            <p class="goodsName">{{item.type}}&nbsp;{{item.model}}</p>
                            <p class="txt">{{item.tag}}</p>
                            <p class="price">{{item.gprice}}</p>
                        </li>
                    </ul>
                </div>
            </div>

            <div id="scroll_3" class="scroll">
                <div class="topic">3F ROG电竞专区</div>
                <div class="list">
                    <img src="./img/goods/f3.jpg" alt="">
                    <ul class="f">
                        <li v-for="item in wares_list.filter(item=>item.kind=='3f')" @click="goInfo(item.gid)">
                            <div class=" imgbox">
                                <img :src="item.gurl" alt="">
                            </div>
                            <p class="goodsName">{{item.type}}&nbsp;{{item.model}}</p>
                            <p class="txt">{{item.tag}}</p>
                            <p class="price">{{item.gprice}}</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="footer">
            <img src="./img/goods/footer.png" alt="">
        </div>

    </div>
</body>

</html>

<script src="./js/axios.js"></script>
<script src="./js/lodash.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            search: '',
            lunbo_index: 1,
            cart_num: 0,
            menu: [],
            lunbo: [
                './img/goods/lunbo/1.jpg', './img/goods/lunbo/2.jpg', './img/goods/lunbo/3.jpg', './img/goods/lunbo/4.jpg', './img/goods/lunbo/5.jpg', './img/goods/lunbo/6.jpg', './img/goods/lunbo/7.jpg', './img/goods/lunbo/8.jpg'
            ],
            timer: null,
            m1_box2: [
                './img/goods/m1-box2-1.png',
                './img/goods/m1-box2-2.png',
                './img/goods/m1-box2-3.png',
                './img/goods/m1-box2-4.png',
                './img/goods/m1-box2-5.png',
            ],
            wares_list: [],
            login: false,
            user: null,
            move_index: 0,
        },
        methods: {
            cli_left() {
                clearInterval(this.timer);
                this.autoPlay();
                if (this.lunbo_index > 0) {
                    this.lunbo_index--
                }
            },
            cli_right() {
                clearInterval(this.timer);
                this.autoPlay();
                if (this.lunbo_index < this.lunbo.length - 1) {
                    this.lunbo_index++
                }
            },
            pagination(index) {
                this.lunbo_index = Number(index)
            },
            autoPlay() {
                this.timer = setInterval(() => {
                    this.lunbo_index++
                    if (this.lunbo_index == this.lunbo.length) {
                        this.lunbo_index = 0;
                    }
                }, 3000)
            },
            autoScroll() {
                $(window).on('scroll', _.throttle(function () {
                    if (document.documentElement.scrollTop < 200) {
                        $('#gg .topBox').hide();
                        $('#gg .rightBox').hide();
                    } else {
                        $('#gg .topBox').show();
                        $('#gg .rightBox').show();
                    }
                }, 200))
            },
            cli_hide(e) {
                $('#gg .topBox').hide();
            },
            toGo(y) {
                $('body,html').animate({ scrollTop: y }, 500);
            },
            prev_move() {
                if (this.move_index - 1 >= 0) {
                    $('#move_boxs .list').animate({ left: --this.move_index * -330 }, 200)
                }
            },
            next_move() {
                if (this.move_index + 1 <= this.m1_box2.length - 4) {
                    $('#move_boxs .list').animate({ left: ++this.move_index * -330 }, 200)
                }
            },
            isLogin() {
                let token = localStorage.getItem('token');
                if (token != null) {
                    axios({
                        url: '/users/is',
                        method: 'get',
                        headers: {
                            token: token
                        }
                    }).then(res => {
                        console.log(res);
                        if (res.data.code == 200) {
                            this.login = true;
                            this.user = res.data.user;
                            this.cart_num = res.data.num;
                        } else {
                            console.log("token 已经过期");
                        }
                    })
                } else {
                    console.log('没有token');
                }
            },
            goInfo(gid) {
                window.open(`./goods?gid=${gid}`)
            },
            exit() {
                localStorage.removeItem('token');
                location.reload();
            }
        },
        created() {
            this.autoPlay();
            this.autoScroll();
            this.isLogin();
            axios({
                url: '/wares/query/all',
                method: 'get'
            }).then(res => {
                this.wares_list = res.data.data.list;
                this.menu = res.data.data.menu;
            })
        },

    })
</script>